<template>
    <h4>1. checkbox</h4>
    {{ checkVal }}
    <br> <br>
    <w-checkbox v-model="checkVal">checkbox</w-checkbox>
    <br> <br>
    <w-checkbox v-model="checkVal" :disabled="true">disabled</w-checkbox>
    <br> <br>
    <w-checkbox v-model="checkVal" :indeterminate="true">半选</w-checkbox>
    <br> <br>
    <w-checkbox v-model="checkVal" @change="checkboxChange">change事件</w-checkbox>
    <br> <br> <br>

    <h4>2. checkbox-group</h4>
    <br> <br>
    {{ checkboxGroupCheckVal }}
    <w-checkbox-group @change="checkboxGroupChange" v-model="checkboxGroupCheckVal">
        <w-checkbox v-for="c in checkboxGroupArr" :key="c" :label="c"></w-checkbox>
    </w-checkbox-group>
</template>

<script>
import { defineComponent, ref } from 'vue';

function useCheckbox() {
    // 单个checkbox
    const checkVal = ref(true); // 注意：给v-model绑定值不要用reactive，因为视图不更新。原因是操作的checkVal，而不是他里面的数据，是改了引用空间。
    // checkbox-group
    const checkboxGroupCheckVal = ref(['北京', '天津']);
    const checkboxGroupArr = ref(['北京', '上海', '天津', '深圳']);
    return {
        checkVal,
        checkboxGroupCheckVal,
        checkboxGroupArr
    }
}
// checkbox的事件
function checkboxChange(val) {
    console.log('checkbox', val);
}
// checkbox-group 的 change事件
function checkboxGroupChange(val) {
    console.log('checkbox-group', val);
}

export default defineComponent({
    setup() {
        return {
            ...useCheckbox(),
            checkboxChange,
            checkboxGroupChange
        }
    }
})
</script>
